<template>
    <div class="boxs">
        <SearchFrom @submitData="submitData" ></SearchFrom>

        <div class="table-box">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="name"  align="center" label="序号" width="80">
                    <template #default="scope">
                        <span v-text="getIndex2(scope.$index)"> </span>
                    </template>  
                </el-table-column> 
                <el-table-column prop="name"  align="center" label="产品名称" width="180" />
                <el-table-column prop="brandName"  align="center" label="品牌" width="180" />
                <el-table-column prop="manufacture"  align="center" label="企业名称" width="250" />
                <el-table-column prop="productSpec"  align="center" label="规格" width="120"/>
                <el-table-column prop="gbCode"  align="center" label="商品条码" />
                <el-table-column prop="address"  align="center" label="产地" />
                <el-table-column prop="address"  align="center" label="操作" width="120">
                    <template #default="scope">
                        <el-button type="primary" @click="lookDetail(scope.row)">查看</el-button>
                    </template>  
                </el-table-column> 
            </el-table>
            <el-pagination
            v-model="currentPage4"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="page.pageSize"
            prev-text="上一页"
            next-text="下一页"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            >
            </el-pagination>
        </div>
        <DetailDia ref="detailDig" :detailData="detailData" v-if="showDetail" @onSubmit="closeSubmit"></DetailDia>
    </div>
</template>
<script>
import SearchFrom from './components/searchFrom.vue'
import DetailDia from './components/detailDialog.vue'
import  { List,category } from '@/apis/modules/productList'
import axios from "axios";
import { ref, reactive, toRefs, onBeforeMount,getCurrentInstance,nextTick } from "vue";
export default {
    name:"product-list",
    components:{
        SearchFrom,
        DetailDia
    },
    
    setup(){
        const detailDig = ref()
        const state = reactive({
            searchData:{
                keyword: '',
                r: '',
                current: 1,
                size: 10
            },
            currentPage4: 1,
            page:{
                total: 0,
                pageSize:0,
            },
            tableData: [],
            showDetail: false,
            detailData: {}
        })
        onBeforeMount(()=>{
           
        })
        const getIndex2 = ($index) =>{
             return (state.searchData.current - 1) * state.searchData.size + $index + 1
        }
        const lookDetail = (item) => {
            state.showDetail = true
            state.detailData = item
            console.log(detailDig)
        }

        const closeSubmit = () =>{
            state.showDetail = false
        }
        const getList = async() =>{
            let  res = await List(state.searchData)
            
            state.page.total = res.total
            state.page.pageSize = res.pageSize
            state.tableData = res.data
            // .map((item)=>{
            //     item.itemInfo = JSON.parse(item.itemInfo)
            //     return item
            // })
        }
        
        const submitData = (val) =>{
            state.searchData = val
            state.searchData.current = 1
            state.searchData.size = 10
            console.log(state.searchData)
            getList()
        }

        const handleSizeChange = (val) =>{
            state.searchData.size =val
            state.searchData.current = 1
             getList()
        }
        const handleCurrentChange = (val) =>{
            console.log(val)
            state.searchData.current =val
             getList()
        }
        return {
            ...toRefs(state),
            submitData,
            handleSizeChange,
            handleCurrentChange,
            getIndex2,
            lookDetail,
            closeSubmit
        }
    }
}
</script>
<style lang="scss" scoped>
.table-box{

}
</style>
